{% extends 'core/base.html' %}

{% block content %}
<div class="detail-container">
    <div class="detail-card">
        <h2>{{ item.name }}</h2>

        <div class="category-badge">
            <span class="category-label">分类：</span>
            <span class="category-value">{{ item.category }}</span>
        </div>

        <div class="description-section">
            <h3>说明：</h3>
            <p class="description-content">{{ item.description|default:"暂无说明" }}</p>
        </div>

        <div class="actions-section">
            {% if user.is_authenticated %}
                <form method="post" action="{% url 'toggle_favorite' item.id %}" class="favorite-form">
                    {% csrf_token %}
                    {% if user in item.favorite_set.all %}
                        <button class="favorite-button favorited">
                            <span class="favorite-icon">★</span> 取消收藏
                        </button>
                    {% else %}
                        <button class="favorite-button">
                            <span class="favorite-icon">☆</span> 收藏
                        </button>
                    {% endif %}
                </form>
            {% else %}
                <p class="login-prompt">
                    <a href="{% url 'login' %}?next={{ request.path }}">登录</a>后可收藏此垃圾信息。
                </p>
            {% endif %}
        </div>
    </div>

    <div class="back-link">
        <a href="{% url 'search' %}?q=" class="btn">
            <span class="back-icon">←</span> 返回查询页面
        </a>
    </div>
</div>

<style>
    .detail-container {
        max-width: 800px;
        margin: 0 auto;
    }

    .detail-card {
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        padding: 2rem;
        margin-bottom: 2rem;
    }

    .category-badge {
        display: inline-flex;
        align-items: center;
        margin: 1.5rem 0;
        background-color: #f5f5f5;
        padding: 0.8rem 1.5rem;
        border-radius: 50px;
    }

    .category-label {
        font-weight: 600;
        margin-right: 0.5rem;
    }

    .category-value {
        color: var(--primary);
        font-weight: 600;
    }

    .description-section {
        margin: 1.5rem 0;
        padding: 1.5rem;
        background-color: #f9f9f9;
        border-radius: 8px;
        border-left: 4px solid var(--primary);
    }

    .description-section h3 {
        margin-top: 0;
        color: var(--primary-dark);
    }

    .description-content {
        line-height: 1.8;
    }

    .actions-section {
        margin-top: 2rem;
        display: flex;
        justify-content: center;
    }

    .favorite-form {
        width: 100%;
        max-width: 300px;
    }

    .favorite-button {
        width: 100%;
        padding: 12px;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50px;
        transition: all 0.3s;
    }

    .favorite-icon {
        margin-right: 8px;
        font-size: 1.2rem;
    }

    .favorited {
        background-color: #FFC107;
    }

    .login-prompt {
        text-align: center;
        padding: 1rem;
        background-color: #e3f2fd;
        border-radius: 8px;
    }

    .back-link {
        text-align: center;
        margin-top: 1.5rem;
    }

    .back-link .btn {
        display: inline-flex;
        align-items: center;
    }

    .back-icon {
        margin-right: 8px;
    }

    @media (max-width: 768px) {
        .detail-card {
            padding: 1.5rem;
        }

        .category-badge {
            display: flex;
            padding: 0.6rem 1rem;
        }
    }
</style>
{% endblock %}